<template>
  <el-table :data="filterTableData" style="width: 100%">
    <el-table-column label="员工ID" prop="id" />
    <el-table-column label="员工姓名" prop="name" />
    <el-table-column label="员工密码" prop="psw" />
    <el-table-column label="员工角色" prop="role" />
    <el-table-column align="right">
      <template #header>
        <el-button @click="showModal = true">添加</el-button>
        <el-input v-model="search" size="small" placeholder="输入姓名查询" />
      </template>
      <template #default="scope">
        <el-button size="small" @click="showModal1 = true">Edit</el-button>
        <el-button size="small" type="danger" @click.prevent="deleteRow(scope.$index)">Delete</el-button>
        <el-button size="small" @click="showMode2(scope.row)">详情</el-button>

      </template>
    </el-table-column>
  </el-table>
  <!-- 模态框 -->
  <div>
    <div v-if="showModal" class="modal">
      <div class="modal-content">
        <el-form :model="form" label-width="120px">
          <el-form-item label="员工姓名">
            <el-input v-model="form.name" />
          </el-form-item>
          <el-form-item label="员工ID">
            <el-input v-model="form.id" />
          </el-form-item>
          <el-form-item label="员工密码">
            <el-input v-model="form.psw" />
          </el-form-item>
          <el-form-item label="员工角色">
            <el-select v-model="form.role" placeholder="选择角色">
              <el-option label="员工" value="员工" />
              <el-option label="人事" value="人事" />
              <el-option label="经理" value="经理" />
              <el-option label="管理员" value="管理员" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onAddItem">Create</el-button>
            <el-button @click="showModal = false">Cancel</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
  <!-- 修改模态框 -->
  <div>
    <div v-if="showModal1" class="modal">
      <div class="modal-content">
        <el-form :model="form" label-width="120px">
          <el-form-item label="员工姓名">
            <el-input v-model="form.name" />
          </el-form-item>
          <el-form-item label="员工ID">
            <el-input v-model="form.id" />
          </el-form-item>
          <el-form-item label="员工密码">
            <el-input v-model="form.psw" />
          </el-form-item>
          <el-form-item label="员工角色">
            <el-select v-model="form.role" placeholder="选择角色">
              <el-option label="员工" value="员工" />
              <el-option label="人事" value="人事" />
              <el-option label="经理" value="经理" />
              <el-option label="管理员" value="管理员" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onupidItem">Create</el-button>
            <el-button @click="showModal1 = false">Cancel</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
  <!-- 详情模态框 -->
  <div>
    <div v-if="showModal2" class="modal">
      <div class="modal-content">
                <!-- <template> -->
                  <p>毕业于:XX大学------------{{ id }}</p>
                <p>住址:XX市XX县XX镇------{{ id }}</p>
                <p>个人信息:XXXXXXXXX----{{ id }}</p>
                <p>个人评价:XXXXXXXXXX---{{ id }}</p>
                <!-- </template> -->
      <el-button @click="showModal2 = false">退出</el-button>
      </div>
      
    </div>
  </div>
  <!-- <div class="demo-pagination-block">
    <el-pagination
      v-model:current-page="currentPage3"
      v-model:page-size="pageSize3"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="prev, pager, next, jumper"
      :total="1000"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    </div> -->
</template>

<script setup>
import { computed, ref, reactive } from 'vue'

// interface User {
//   id: string
//   name: string
//   address: string
// }
let showModal = ref(false)
let showModal1 = ref(false)
let showModal2 = ref(false)
const id = ref()

const showMode2 = (row)=>{
  showModal2.value = true
  id.value = row.id
}

const search = ref('')
const filterTableData = computed(() =>
  tableData.value.filter(
    (data) =>
      !search.value ||
      data.name.toLowerCase().includes(search.value.toLowerCase())
  )
)

const tableData = ref([
  {
    id: '0' + Math.ceil(Math.random() * 10000),
    name: 'Tom',
    psw: 'Tom1',
    role: '员工',
    
    // div:psw+'/'+role,

  },
  {
    id: '0' + Math.ceil(Math.random() * 10000),
    name: 'John',
    psw: 'Tom2',
    role: '人事',
    
    // div:psw+'/'+role,

  },
  {
    id: '0' + Math.ceil(Math.random() * 10000),
    name: 'Morgan',
    psw: 'Tom3',
    role: '管理员',
    
    // div:psw+'/'+role,

  },
  {
    id: '0' + Math.ceil(Math.random() * 10000),
    name: 'Jessy',
    psw: 'Tom4',
    role: '经理',
    
    // div:psw+'/'+role,

  },
])
const form = reactive({
  name: '',
  psw: '',
  role: '',
  id: '',
})
const deleteRow = (index) => {
  if (window.confirm(`你确定要删除ID为${tableData.value[index].id}，姓名为${tableData.value[index].name}的员工吗`)) {
    //后台删除数据方法
    tableData.value.splice(index, 1)
    return true;
  } else {
    return false;
  }

}

const onAddItem = () => {
  // now.setid(now.getid() + 1)
  if (form.id === '' || form.name === '' || form.psw === '' || form.role === '') {
    alert('输入内容')
    return
  }
  tableData.value.push({
    id: form.id,
    name: form.name,
    psw: form.psw,
    role: form.role
  })
  showModal.value = false
  form.name = '',
    form.psw = '',
    form.id = '',
    form.role = ''

}
const onupidItem = (index) => {
  // now.setid(now.getid() + 1)
  // if(form.id===''){
  //  form.id=tableData.value.id
  // }
  // if(form.name===''){
  //  form.name=tableData.value.name
  // }
  // if(form.psw===''){
  //  form.psw=tableData.value.psw
  // }
  // if(form.role===''){
  //  form.role=tableData.value.role
  // }
  tableData.value.splice(index, 1, {
    id: form.id,
    name: form.name,
    psw: form.psw,
    role: form.role
  })
  console.log(form.id)
  showModal1.value = false
  form.name = '',
    form.psw = '',
    form.id = '',
    form.role = ''

}
const currentPage1 = ref(5)
const currentPage2 = ref(5)
const currentPage3 = ref(5)
const currentPage4 = ref(4)
const pageSize2 = ref(100)
const pageSize3 = ref(100)
const pageSize4 = ref(100)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
}
</script>
<style scoped>
.modal {
  display: block;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: 5% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>
